<template>
  <div class="outstore">
        <div class="top-add">
            <el-button size="mini" type="primary" @click="openSearch">查询报废单</el-button>
            <!-- <el-button size="mini" class="pull-right"  style="margin-right:50px" type="primary" @click="outorderTable">导出</el-button> -->
            <el-button size="mini" class="pull-right" style="margin-right:50px" type="primary" @click="goAddOutOrder">新增报废</el-button>
            
        </div>
        <!-- 查询搜索框 -->
      <el-row v-if="is_search" :gutter="16" style="line-height:40px;margin-top:-20px;margin-bottom:20px">
        <el-col :span="5">
          <div class="">
            <label for="">报废单号：</label>
            <el-input v-model="destroyNum" size="small" placeholder="请输入报废单号" style="width:80%"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="">
            <label for="">报废类型：</label>
            <el-select size="small" v-model="destroyType"  style="width:80%">
                <el-option v-for="item in destroyTypelist" 
                  :key="item.id" 
                  :label="item.name" 
                  :value="item.id">
                </el-option>
              </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="">
            <label for="">选择日期：&nbsp;&nbsp;</label>
            <div>
              <el-date-picker
                size="small"
                v-model="select_date"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']" style="width:80%">
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
            <label for="">装备名称：</label>
            <el-input v-model="prodName" size="small" placeholder="请输入装备名称" style="width:80%"></el-input>
        </el-col>
        <el-col :span="3" style="margin-top:10px;">
          <el-button type="danger" size="mini" style="width:60px" @click="searchDestoryOrder">搜索</el-button>
        </el-col>
        <el-col :span="2" style="margin-top:10px;">
          <el-button type="danger" size="mini" style="width:60px" @click="clearSearch">清空</el-button>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table :data="destoryOrderList" border style="width: 100%" v-loading="outLoading">
            <el-table-column prop="destroyNum" label="报废单号"></el-table-column>
            <el-table-column prop="detypeName" label="报废类型"></el-table-column>
            <el-table-column prop="destroyPerson" label="制单人"></el-table-column>
            <el-table-column prop="destroyDate" label="报废日期"></el-table-column>
            <el-table-column prop="destroyStatus" label="状态">
              <template slot-scope="scope">
                <div>
                  <div v-if="scope.row.destroyStatus == 2">待报废</div>
                  <div v-if="scope.row.destroyStatus == 1">已报废</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="destroyRemark" label="备注"></el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-reading" @click="watchDestoryOrder(scope.row)">{{scope.row.destroyStatus == 2 ? '提交' : '查看'}}</el-button>
                <el-button size="mini" v-if="scope.row.destroyStatus == 2" icon="el-icon-edit" @click="editDestoryOrder(scope.row)">修改</el-button>
                <el-button size="mini" v-if="scope.row.destroyStatus == 2" icon="el-icon-delete" @click="delDestoryOrder(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>

  <destorydetail :openDestorydetail.sync="openDestorydetail" :viewDestoryOrder="viewDestoryOrder"></destorydetail>
  <excel style="display:none" :excelname="excelname" :outPutKey="outputKey" :tableData="outProdsInfo" :trueOutExecl.sync="trueOutExecl"></excel>
  </div>
</template>

<script>
import destorydetail from './destorydetail';
import excel from '../test/excel';
import { GetDestoryOrder, DelDestoryOrder, FindDestoryOrderById, SearchDestoryStore } from '@/api/destory';
export default {
  name: 'putstore',
  components:{
    excel,
    destorydetail
  },
  data() {
    return {
        outLoading: true,
        trueOutExecl: false,  // 确认是否导出
        openDestorydetail: false,
        outputKey: [], // 导出表格title
        excelname: '报废详情',
        is_search: false,
        destroyNum: '',
        destroyType: '',
        destroyTypelist: [
          { id: 1, name: '报废'},
          { id: 2, name: '退役'},
        ],
        select_date: ["",""],
        prodName: '',
        destoryOrderList: [],
        outProdsInfo: [],  // 导出装备详情
        viewDestoryOrder: {},
        // 分页
        pageNum: 1,
        pageSize: 8,
        total_num: null,
        isSearch: false,
    }
    
  },
  watch: {
    openDestorydetail(newVal) {
      if (!newVal) {
        this.outLoading = true;
        if (this.isSearch) {
          setTimeout(() => {
            this.searchDestoryOrder()
          }, 500)
        } else {
          setTimeout(() => {
            this.getDestoryOrder()
          }, 500)
        }
      }
    }
  },
  mounted() {
    this.outLoading = true;
    this.getDestoryOrder();
  },
  methods:{
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {
      this.outLoading = true;
      this.pageNum = val;
      this.getDestoryOrder()
      if (this.isSearch) {
          this.searchDestoryOrder()
      } else {
          this.getDestoryOrder()
      }
    },
    // 获取报废单信息
    getDestoryOrder() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetDestoryOrder(reqData).then( res => {
        let data = res.data.info;
        this.destoryOrderList = data.list;
        this.total_num = data.total;
        this.destoryOrderList.forEach( e => e.outDate = this.formatDate(e.outDate));
        this.outLoading = false;
      })
    },
    // 导出表格
    outorderTable() {
      this.trueOutExecl = !this.trueOutExecl;
      this.outputKey = [{
            prodCode: "装备编号",
            prodName: "装备名称",
            stockNum: "库存数",
            prodNum: '报废数',
            areaName: "库区",
            departmentCode: "库位",
            emit: "单位",
            prodBatch: '批次',
            prodPrice: '价格',
            prodSpecial: "规格",
      }]
    },
    // 点击查询按钮打开下拉框
    openSearch() {
        this.is_search = !this.is_search;
    },
    clearSearch() {
        this.destroyNum = '';
        this.destroyType = '';
        this.select_date = ["",""];
        this.prodName = '';
    },
    searchDestoryOrder() {
      if (this.select_date[0]) {
        this.select_date[0] = this.formatDate(this.select_date[0]);
        this.select_date[1] = this.formatDate(this.select_date[1]);
      }
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        beginTime: this.select_date[0],
        endTime: this.select_date[1],
        destroyNum: this.destroyNum,
        destroyTypeid: this.destroyType,
        prodName: this.prodName,
      }
      SearchDestoryStore(reqData).then( res => {
        let data = res.data.info;
        this.destoryOrderList = data.list;
        this.total_num = data.total;
        this.destoryOrderList.forEach( e => e.outDate = this.formatDate(e.outDate));
        this.outLoading = false;
        this.isSearch = true;
      })
    },
    goAddOutOrder() {
        this.$router.push('/adddestory')
    },
    delDestoryOrder(el) {
      this.confirm({
        fn: (id) => {
          this.outLoading = true;
           DelDestoryOrder(id).then( res => {
              let data = res.data
              this.$message({
                  message: data.msg,
                  type: 'success'
              })
              this.getDestoryOrder()
            })
        },
        id: el.destroyId,
        content: '此操作将删除当前信息, 是否继续?',
      });
    },
    editDestoryOrder(data) {
        this.$router.push({
          path: '/adddestory',
          query: {destroyId:data.destroyId}
        })
    },
    watchDestoryOrder(data) {
      FindDestoryOrderById(data.destroyId).then( res => {
        this.viewDestoryOrder = res.data[0]
        this.viewDestoryOrder.destroyDate = this.formatDate(this.viewDestoryOrder.destroyDate)
      })
      this.openDestorydetail = true;
      
    }
  },


}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
</style>
  
